<link rel="stylesheet" href="/Static/mobile/vant/index.css">
<script src="/Static/mobile/vant/vue.min.js"></script>
<script src="/Static/mobile/vant/vant.min.js?i=1"></script>
<script src="/Static/mobile/js/vantarealist.js"></script>
<div  id="addressapp">
    <van-cell-group v-if="!showList&&!showAdd">
        <van-cell style="padding:20px 15px;" icon="location" center @click="showList=true" v-if="chosenAddressId!=0" is-link :title="addressInfo.name+','+addressInfo.tel" 
         :label="addressInfo.address"></van-cell>
        <van-cell icon="location" center @click="showList=true" v-if="chosenAddressId==0" is-link title="添加收货地址"  ></van-cell>
    </van-cell-group>
    <div v-show="showList||showAdd"  style="overflow-y: scroll;position:absolute;top:0;left:0;height:100%;width:100%;z-index:2000;background:#ededed;">
        <van-address-list class="address-list"
            v-if="showList" 
            v-model="chosenAddressId"
            :list="list"
            @add="onAdd"
            @edit="onEdit"
            @select="onSelect"
        ></van-address-list>
     
        <div v-show="showAdd" >
            <van-nav-bar
                title="收货地址"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            ></van-nav-bar>
            <van-cell-group>
                <van-field label="姓名" v-model="addressInfo.name" placeholder="请输入姓名" ></van-field>
                <van-field label="手机号" type="tel" v-model="addressInfo.tel" placeholder="请输入手机号" ></van-field>
                
                <van-cell class="area-cell" is-link>
                    <template slot="title">
                        <span class="van-cell-text">省</span>
                    </template>
                    <template>
                        <select style="width:100%;" id="province" name="province">
                        </select>
                    </template>
                </van-cell>
                <van-cell class="area-cell" is-link>
                    <template slot="title">
                        <span class="van-cell-text">市</span>
                    </template>
                    <template>
                        <select style="width:100%;" id="city" name="city">
                        </select>
                    </template>
                </van-cell>
                <van-cell class="area-cell" is-link>
                    <template slot="title">
                        <span class="van-cell-text">区/县</span>
                    </template>
                    <template>
                        <select style="width:100%;" id="county" name="county">
                        </select>
                    </template>
                </van-cell>
                <van-field label="详细地址" v-model="addressInfo.detail" placeholder="请输入详细地址" ></van-field>
                <van-switch-cell v-model="addressInfo.is_default" title="默认地址" ></van-switch-cell>
            </van-cell-group>
            <div style="margin:1em auto;width:90%;">
                <van-button @click="onSave" type="danger" size="normal" block>保存</van-button>
                <br>
                <van-button @click="onDelete" v-if="addressInfo.id" type="default" size="normal" block>删除</van-button>
            </div>
        </div> 
    </div>
</div>

<script src="__STATIC__mobile/js/areadata.js"></script>
<script src="__STATIC__mobile/js/myarea.js"></script>
<script>

    var addressapp = new Vue({
        el: '#addressapp',
        data: {
            showList:false,
            showAdd:false,
            areaList:window.areaList,
            addressInfo:{},
            chosenAddressId: 0,
            list: [
            ],
        },
        watch: {
            showAdd: function (val) {
                if(val) {
                    $('#form').hide();
                    $('#nav').hide();
                }else{
                    $('#form').show();
                    $('#nav').show();
                }
            }
        },
        created: function () {
            this.getAddressList();
        },
        mounted: function () {
            window.v = this;
        },
        methods: {
            getAddressList: function () {
                var self = this;
                $.get('/mobile/cart/getAddressList').then(function(res) {
                    self.list = [];
                    if(res.ret==0) {
                        res.data.forEach(function(item){
                            self.list.push(item);
                            if(item.is_default==1) {
                                self.chosenAddressId = item.id;
                                self.addressInfo = item;
                            }
                        });
                        if(!self.chosenAddressId) {
                            self.chosenAddressId = res.data[0].id;
                            self.addressInfo = res.data[0];
                        }
                    }
                })
            },
            onAdd: function () {
                this.addressInfo = {};
                this.showAdd = true;
                this.showList = false;
                city.getcity('province','city','county','','','',1);
            },
            onClickLeft:function () {
                this.showAdd = false;
                this.showList = true;
            },
            onEdit: function (res) {
                this.showAdd = true;
                this.showList = false;
                res.is_default = res.is_default==1?true:false;
                this.addressInfo = res;
                city.getcity('province','city','county',res.province,res.city,res.county,1);
            },
            onSelect:function (item,index) {
                this.addressInfo = item;
                $("#province_id").val(item.province_id);
                this.showAdd = false;
                this.showList = false;
            },
            onSave: function () {
                var address = this.addressInfo;
                var self = this;
                address.is_default = address.is_default?1:0;
                address.mobile = address.tel;
                address.address = address.detail;
                address['province'] = $('#province').val();
                address['city'] = $('#city').val();
                address['county'] = $('#county').val();
                $.ajax({
                    type: 'post',
                    url:'/mobile/cart/addAddress',
                    data: address
                }).then(function(res) {
                    if(res.ret==1) {
                        showerror(res.msg);
                    }else{
                        showsuccess(res.msg);
                        self.getAddressList();
                        self.showAdd = false;
                        self.showList = true;
                    }
                })
            },
            onDelete: function () {
                var self = this;
                this.$dialog.confirm({
                    title: '确定删除吗?',
                }).then(function(){
                    $.get('/mobile/cart/deleteaddress?id=' + self.addressInfo.id).then(function(res){
                        if(res.ret==1) {
                            showerror(res.msg);
                        }else{
                            showsuccess(res.msg);
                            self.getAddressList();
                            self.showAdd = false;
                            self.showList = true;
                        }
                    })
                }).catch(function(){

                });
            },
            onChangeDetail: function () {

            }
        }
    })
</script>
<style>
    .address-list .van-icon{
        position:absolute;
    }
    .area-cell .van-cell__value{
        flex:3;
    }
    #addressapp .van-nav-bar__text,#app .van-nav-bar .van-icon {
        color:#e6207a;
    }
    #addressapp .van-button--danger {
        background-color: #e6207a;
        border: 1px solid #e6207a;
    }
    #addressapp .van-switch--on {
        background-color:#e6207a;
    }
    #addressapp .van-address-list .van-icon-checked {
        color:#e6207a;
    }
    #addressapp .van-nav-bar .van-icon {
        color:#e6207a;
    }
</style>